<template>
  <div class="coach-evaluation">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>教练评价</span>
          <el-select v-model="selectedCoach" placeholder="选择教练" clearable @change="handleCoachChange">
            <el-option
              v-for="coach in coaches"
              :key="coach.id"
              :label="coach.name"
              :value="coach.id"
            >
              <span>{{ coach.name }}</span>
              <span class="coach-type">{{ getCoachTypeText(coach.type) }}</span>
            </el-option>
          </el-select>
        </div>
      </template>

      <!-- 评价概览 -->
      <div class="evaluation-overview" v-if="selectedCoach">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>总体评分</span>
                  <el-tag type="success">{{ overallRating }}分</el-tag>
                </div>
              </template>
              <div class="rating-display">
                <el-rate
                  v-model="overallRating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                />
                <div class="rating-count">共 {{ totalEvaluations }} 条评价</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>评分分布</span>
                </div>
              </template>
              <div class="rating-distribution">
                <div v-for="(count, score) in ratingDistribution" :key="score" class="distribution-item">
                  <span class="score-label">{{ score }}星</span>
                  <el-progress
                    :percentage="(count / totalEvaluations) * 100"
                    :stroke-width="20"
                    :format="(percentage) => `${count}人 (${percentage.toFixed(1)}%)`"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 评分维度 -->
        <el-card class="dimension-card" shadow="hover">
          <template #header>
            <div class="overview-header">
              <span>评分维度</span>
            </div>
          </template>
          <el-row :gutter="40">
            <el-col :span="8" v-for="dimension in dimensions" :key="dimension.name">
              <div class="dimension-item">
                <div class="dimension-header">
                  <span>{{ dimension.label }}</span>
                  <span class="dimension-score">{{ dimension.score }}分</span>
                </div>
                <el-progress
                  :percentage="(dimension.score / 5) * 100"
                  :stroke-width="15"
                  :format="() => ''"
                />
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 评价列表 -->
        <el-card class="evaluation-list" shadow="hover">
          <template #header>
            <div class="overview-header">
              <span>评价列表</span>
              <el-radio-group v-model="filterType" size="small">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="positive">好评</el-radio-button>
                <el-radio-button label="negative">差评</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          
          <div class="evaluation-items">
            <div v-for="evaluation in filteredEvaluations" :key="evaluation.id" class="evaluation-item">
              <div class="evaluation-header">
                <div class="student-info">
                  <el-avatar :size="40" :src="evaluation.studentAvatar" />
                  <span class="student-name">{{ evaluation.studentName }}</span>
                  <span class="training-info">{{ evaluation.subject }}</span>
                </div>
                <div class="evaluation-rating">
                  <el-rate v-model="evaluation.rating" disabled />
                  <span class="evaluation-time">{{ evaluation.time }}</span>
                </div>
              </div>
              <div class="evaluation-content">
                {{ evaluation.content }}
              </div>
              <div class="evaluation-images" v-if="evaluation.images && evaluation.images.length">
                <el-image
                  v-for="image in evaluation.images"
                  :key="image"
                  :src="image"
                  :preview-src-list="evaluation.images"
                  fit="cover"
                  class="evaluation-image"
                />
              </div>
              <div class="coach-reply" v-if="evaluation.reply">
                <div class="reply-header">
                  <el-icon><ChatLineRound /></el-icon>
                  <span>教练回复</span>
                </div>
                <div class="reply-content">{{ evaluation.reply }}</div>
              </div>
              <div class="evaluation-footer" v-else>
                <el-button link type="primary" @click="handleReply(evaluation)">回复</el-button>
              </div>
            </div>
          </div>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 未选择教练时的提示 -->
      <el-empty v-else description="请选择教练查看评价" />
    </el-card>

    <!-- 回复抽屉 -->
    <el-drawer
      title="回复评价"
      v-model="replyDialogVisible"
      direction="rtl"
      size="500px"
    >
      <el-form
        ref="replyFormRef"
        :model="replyForm"
        :rules="replyRules"
      >
        <el-form-item prop="content">
          <el-input
            v-model="replyForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入回复内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply">确定</el-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ChatLineRound } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 选中的教练
const selectedCoach = ref('2')

// 教练列表
const coaches = ref([
  { id: '1', name: '李教练', type: 'subject2' },
  { id: '2', name: '王教练', type: 'subject3' },
  { id: '3', name: '张教练', type: 'theory' },
  { id: '4', name: '刘教练', type: 'subject2' },
  { id: '5', name: '陈教练', type: 'subject3' }
])

// 总体评分
const overallRating = ref(4.5)
const totalEvaluations = ref(128)

// 评分分布
const ratingDistribution = ref({
  5: 80,
  4: 30,
  3: 10,
  2: 5,
  1: 3
})

// 评分维度
const dimensions = ref([
  { name: 'teaching', label: '教学水平', score: 4.8 },
  { name: 'attitude', label: '服务态度', score: 4.6 },
  { name: 'punctuality', label: '准时程度', score: 4.7 },
  { name: 'patience', label: '耐心程度', score: 4.5 },
  { name: 'professional', label: '专业水平', score: 4.8 },
  { name: 'safety', label: '安全意识', score: 4.9 }
])

// 筛选类型
const filterType = ref('all')

// 评价列表
const evaluations = ref([
  {
    id: '1',
    studentName: '张三',
    studentAvatar: 'https://placeholder.com/150',
    subject: '科目二培训',
    rating: 5,
    time: '2024-03-15 14:30',
    content: '李教练教学非常耐心，讲解详细，让我很快就掌握了倒车入库的要领。',
    images: [
      'https://placeholder.com/300',
      'https://placeholder.com/300'
    ],
    reply: '感谢您的认可，我会继续努力提供更好的培训服务。'
  },
  {
    id: '2',
    studentName: '李四',
    studentAvatar: 'https://placeholder.com/150',
    subject: '科目二培训',
    rating: 4,
    time: '2024-03-14 16:20',
    content: '教练讲解很专业，建议可以多一些实践机会。',
    images: [],
    reply: null
  },
  {
    id: '3',
    studentName: '王五',
    studentAvatar: 'https://placeholder.com/150',
    subject: '科目三培训',
    rating: 5,
    time: '2024-03-13 10:15',
    content: '王教练经验丰富，方法独特，让我在短时间内掌握了科目三的要点。',
    images: [],
    reply: '谢谢夸奖，安全驾驶是第一位的，很高兴能帮到你。'
  },
  {
    id: '4',
    studentName: '赵六',
    studentAvatar: 'https://placeholder.com/150',
    subject: '理论培训',
    rating: 3,
    time: '2024-03-12 09:40',
    content: '张教练讲解清晰，但课堂氛围有点沉闷，希望能增加一些互动环节。',
    images: [],
    reply: null
  },
  {
    id: '5',
    studentName: '孙七',
    studentAvatar: 'https://placeholder.com/150',
    subject: '科目二培训',
    rating: 1,
    time: '2024-03-11 15:25',
    content: '刘教练脾气不好，经常骂人，一点耐心都没有，很影响学习心情。',
    images: [],
    reply: null
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(128)

// 回复对话框
const replyDialogVisible = ref(false)
const replyFormRef = ref(null)
const replyForm = ref({
  evaluationId: '',
  content: ''
})

// 回复验证规则
const replyRules = {
  content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
}

// 获取教练类型文本
const getCoachTypeText = (type) => {
  const typeMap = {
    'subject2': '科目二教练',
    'subject3': '科目三教练',
    'theory': '理论教练'
  }
  return typeMap[type] || type
}

// 筛选后的评价列表
const filteredEvaluations = computed(() => {
  if (filterType.value === 'all') return evaluations.value
  return evaluations.value.filter(evaluation => {
    if (filterType.value === 'positive') return evaluation.rating >= 4
    return evaluation.rating <= 2
  })
})

// 教练变更
const handleCoachChange = (value) => {
  // 实现教练变更逻辑
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

// 获取数据
const fetchData = () => {
  // 实现获取数据逻辑
}

// 回复评价
const handleReply = (evaluation) => {
  replyForm.value.evaluationId = evaluation.id
  replyForm.value.content = ''
  replyDialogVisible.value = true
}

// 提交回复
const submitReply = async () => {
  if (!replyFormRef.value) return
  await replyFormRef.value.validate((valid) => {
    if (valid) {
      // 实现提交逻辑
      ElMessage.success('回复成功')
      replyDialogVisible.value = false
    }
  })
}
</script>

<style scoped>
.coach-evaluation {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  gap: 20px;
}

.card-header .el-select {
  max-width: 200px;
}

.coach-type {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.evaluation-overview {
  margin-top: 20px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rating-display {
  text-align: center;
}

.rating-count {
  margin-top: 10px;
  color: #909399;
}

.rating-distribution {
  padding: 10px;
}

.distribution-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.score-label {
  width: 40px;
  margin-right: 10px;
}

.dimension-card {
  margin-top: 20px;
}

.dimension-item {
  margin-bottom: 20px;
}

.dimension-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dimension-score {
  color: #ff9900;
  font-weight: bold;
}

.evaluation-list {
  margin-top: 20px;
}

.evaluation-items {
  margin-bottom: 20px;
}

.evaluation-item {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.evaluation-item:last-child {
  border-bottom: none;
}

.evaluation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.student-info {
  display: flex;
  align-items: center;
}

.student-name {
  margin: 0 10px;
  font-weight: bold;
}

.training-info {
  color: #909399;
  font-size: 14px;
}

.evaluation-rating {
  display: flex;
  align-items: center;
}

.evaluation-time {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}

.evaluation-content {
  margin: 10px 0;
  line-height: 1.5;
}

.evaluation-images {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.evaluation-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.coach-reply {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.reply-header {
  display: flex;
  align-items: center;
  color: #909399;
  margin-bottom: 5px;
}

.reply-header .el-icon {
  margin-right: 5px;
}

.reply-content {
  color: #606266;
  line-height: 1.5;
}

.evaluation-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>